<%--
  Created by IntelliJ IDEA.
  User: 86130
  Date: 2020/12/25
  Time: 11:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/layui.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/view.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/common.css" />
    <title></title>
</head>
<body class="layui-view-body">
<div class="layui-content"  >
    <h1 class="mytitle"  >课程学分分析 (单位/分)</h1>
    <div id="analyzeScore" style="width: 98%;height: 90%;margin-left:1%"  >

    </div>
</div>
<script src="${pageContext.request.contextPath}/assets/layui.all.js"></script>
<script src="${pageContext.request.contextPath}/jquery.js"></script>
<script src="${pageContext.request.contextPath}/echarts.min.js"></script>


<script>
    var element = layui.element;
    $(document)
        .ready(
            function() {
                var myChart = echarts
                    .init(document
                        .getElementById('analyzeScore'));

                myChart.showLoading();
                // 异步加载数据
                var names = [];    //类别数组（实际用来盛放X轴坐标值）
                var nums = [];    //销量数组（实际用来盛放Y坐标值）



                let index = 0;
                var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];


                function fun() {
                    var timer = setInterval(function() {
                        console.log(index)
                        myChart.dispatchAction({
                            type: 'hideTip',
                            seriesIndex: 0,
                            dataIndex: index
                        });
                        // 显示提示框
                        myChart.dispatchAction({
                            type: 'showTip',
                            seriesIndex: 0,
                            dataIndex: index
                        });
                        // 取消高亮指定的数据图形
                        myChart.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: index == 0 ? 5 : index - 1
                        });
                        myChart.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: index
                        });
                        index++;
                        if (index > 5) {
                            index = 0;
                        }
                    }, 3000)
                }
                fun();
                $.ajax({
                    type: "post",
                    async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                    url: "${pageContext.request.contextPath}/index/countCredit",    //请求发送到TestServlet处
                    data: [],
                    dataType: "json",        //返回数据形式为json
                    success: function (result){
                        console.log(result);

                        //请求成功时执行该函数内容，result即为服务器返回的json对象
                        if (result) {
                            for (let i = 0; i < result.length; i++) {
                                names.push(result[i].credit);    //挨个取出类别并填入类别数组
                            }
                            for (let i = 0; i < result.length; i++) {
                                nums.push(result[i].count);    //挨个取出销量并填入销量数组
                            }
                            let arry = [];
                            let items= {};
                            for (let i = 0; i <nums.length ; i++) {
                                items={
                                    "name":names[i],
                                    "value":nums[i]
                                }
                                arry.push(items);
                            }
                            myChart.hideLoading();    //隐藏加载动画
                          myChart.setOption({        //加载数据图表
                                title: {
                                    text: '课程学分分析',
                                    x: 'center',
                                    y: 'center',
                                    textStyle: {
                                        fontSize: 20
                                    }
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                series: [{
                                    type: 'pie',
                                    center: ['50%', '50%'],

                                    radius: ['50%', '70%'],
                                    clockwise: true,
                                    avoidLabelOverlap: true,
                                    hoverOffset: 30,
                                    emphasis:{
                                        itemStyle:{
                                            borderColor: '#f3f3f3',
                                            borderWidth: 20
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: function(params) {
                                                return colorList[params.dataIndex]
                                            }
                                        }
                                    },
                                    label: {
                                        show: true,
                                        position: 'outside',
                                        formatter: '{a|{b}：{d}%}\n{hr|}',
                                        rich: {
                                            hr: {
                                                backgroundColor: 't',
                                                borderRadius: 3,
                                                width: 3,
                                                height: 3,
                                                padding: [3, 3, 0, -12]
                                            },
                                            a: {
                                                padding: [-30, 15, -20, 15],
                                                fontSize: 30
                                            }
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            length: 80,
                                            length2: 100,
                                            lineStyle: {
                                                width: 5
                                            }
                                        }
                                    },
                                    data: arry //对象格式
                                }]


                            });


                        }
                    },
                    error: function (errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        myChart.hideLoading();
                    }
                })
            });


</script>
</body>
</html>
